@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes modalIn {
  0% {
    opacity: 0;
    transform: scale(0.98) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.98);
  }
}

.animate-fade-in {
  animation: fadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-out {
  animation: fadeOut 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-modal-in {
  animation: modalIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-modal-out {
  animation: modalOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.custom-video-player {
  --video-progress-color: #4B4DB3;
}

.custom-video-player video::-webkit-media-controls-panel {
  display: none !important;
}

.custom-video-player video::-webkit-media-controls {
  display: none !important;
}

.custom-video-player .progress-bar {
  @apply absolute bottom-0 left-0 right-0 h-1.5 bg-white/10 cursor-pointer transition-all duration-300;
  transform-origin: bottom;
  user-select: none;
}

.custom-video-player:hover .progress-bar {
  @apply h-2.5;
}

.custom-video-player .progress-fill {
  @apply h-full bg-[var(--video-progress-color)] origin-left transition-transform duration-100;
  position: relative;
}

.custom-video-player .progress-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--video-progress-color);
  opacity: 0;
  transition: opacity 0.2s;
}

.custom-video-player:hover .progress-fill::after {
  opacity: 1;
}

.custom-video-player .progress-bar:active .progress-fill::after {
  width: 12px;
  height: 12px;
  opacity: 1;
}
